<template>
	<view class="container">
		<u-form :model="form" ref="uForm">
			<u-form>
				<u-form-item label="姓名">
					<u-input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
			</u-form>
			<u-form>
				<u-form-item label="联系电话">
					<u-input v-model="form.phone" placeholder="请输入电话" />
				</u-form-item>
			</u-form>
			<u-form>
				<u-form-item label="所在位置">
					<u-input style="color:#333333" @click="showAddr = true" :value="form.address" placeholder="请选择地址" />
					<u-picker mode="region" v-model="showAddr" :area-code='["21", "2101", "210103"]'
						@confirm='selectAddr'></u-picker>
				</u-form-item>
			</u-form>
			<u-form>
				<u-form-item label="详细地址">
					<u-input style="color:#333333"  v-model="form.cityds" placeholder="请输入详细地址" />
				</u-form-item>
			</u-form>
			<u-form-item label="维修问题">
				<u-input v-model="form.showbox" placeholder="请描述维修问题" />
			</u-form-item>
			<u-form-item label="故障时间">
				<u-input style="color:#333333" @click="showtime = true" :value="form.time" placeholder="请选择时间" />
				<u-calendar v-model="showtime" @change="timeshow" :arrow="false"></u-calendar>
			</u-form-item>
			<u-button type="success" @click="submit">提交</u-button>
		</u-form>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '', //姓名
					phone:'', //电话
					address: '', //房屋地址
					cityds: '', //详细地址
					showbox: '', // 装修内容
					time: '', //装修时间

				},
				showAddr: false,
				addrenoshow: false,
				showtime: false,
				action: 'http://www.example.com/upload',
				addrenoyesListindex: 0,
				tagList: [],
			}
		},
		methods: {
			selectAddr(e) {
				console.log(e)
				// 点击后获取省市区展现到页面
				this.form.address = `${e.province.label}-${e.city.label}-${e.area.label}`
			},
			timeshow(e) {
				this.form.time = e.result
			},
			selectaddrenoyes(e, addlist) {
				this.addrenoyesListindex = e[0]
				this.form.addrenoyes = addlist[this.addrenoyesListindex].name
			},
			// 表单数据
			submit() {
				console.log(JSON.stringify(this.form))
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100%;
		padding: 0 20rpx;

		/deep/.u-form-item--left {
			flex: none !important;
			width: 180rpx !important;
			font-size: 32rpx;
		}
	}
</style>
